<template>
  <div class="app-container">
    <el-card style="margin-bottom: 10px">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="108px"
      >
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <el-form-item
            prop="belongingCompanyId"
            label="发票所属公司"
            style="display: inline-flex; align-items: center"
          >
            <el-select
              v-model="queryParams.belongingCompanyId"
              clearable
              placeholder="请选择"
              @change="handleQuery"
            >
              <el-option
                v-for="item in companyList"
                :key="item.belongingCompanyId"
                :label="item.name"
                :value="item.belongingCompanyId"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            prop="type"
            label="发票类型"
            style="display: inline-flex; align-items: center"
          >
            <el-select
              v-model="queryParams.type"
              clearable
              placeholder="请选择"
              @change="handleQuery"
            >
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            prop="salesInvoiceId"
            label="销方公司"
            style="display: inline-flex; align-items: center"
          >
            <el-select
              v-model="queryParams.salesInvoiceId"
              clearable
              placeholder="请选择"
              @change="handleQuery"
            >
              <el-option
                v-for="item in saleCompanyList"
                :key="item.invoiceInformationId"
                :label="item.name"
                :value="item.invoiceInformationId"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            prop="code"
            label="发票编码"
            style="display: inline-flex; align-items: center"
          >
            <el-input
              v-model="queryParams.code"
              placeholder="请输入发票编码"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </div>

        <el-row>
          <el-col :span="12">
            <el-form-item
              label="开票日期"
              style="display: inline-flex; align-items: center"
            >
              <el-date-picker
                clearable
                v-model="queryParams.value"
                value-format="yyyy-MM-dd"
                placeholder="请选择开票日期"
                :editable="false"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="handleQuery"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-form-item style="float: right">
            <div style="display: flex; align-items: center; margin-top: 10px">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleQuery"
                style="width: 85px; height: 40px"
                >搜索</el-button
              >
              <el-button
                icon="el-icon-refresh"
                @click="resetQuery"
                style="width: 85px; height: 40px"
                >重置</el-button
              >
            </div>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>

    <el-card>
      <stylizedTable
        title="发票台账"
        :buttonList="buttonList"
        :statusColor="true"
        :selector="true"
        :ordinal="true"
        :queryParams="queryParams"
        :loading="loading"
        :total="total"
        :tableItem="tableItem"
        :tableData="InvoiceList"
        @reset="getList"
        @getList="getList"
        @handleSelectionChange="handleSelectionChange"
      >
        <template #slot-buttonList>
          <el-upload
            :action="fileUrl"
            :on-success="uploadFileHandleAdd"
            :before-upload="handleBeforeUpload"
            :show-file-list="false"
            :headers="headers"
          >
            <el-button
              style="height: 40px; margin-left: 10px"
              icon="el-icon-circle-plus-outline"
              type="primary"
              >导入发票</el-button
            >
          </el-upload>
        </template>
      </stylizedTable>
    </el-card>

    <el-dialog
      title="发票详情"
      :visible.sync="open"
      width="90%"
      append-to-body
      :close-on-click-modal="false"
    >
      <div>
        <div
          style="
            margin-bottom: 20px;
            border-bottom: 1px solid rgb(223, 228, 237);
            padding-bottom: 3px;
          "
        >
          <div class="tit_box">
            <div :class="aciton == 0 ? 'act_tit' : 'tit'" @click="aciton = 0">
              发票基本详情
            </div>
            <div
              :class="aciton == index + 1 ? 'act_tit' : 'tit'"
              @click="aciton = index + 1"
              v-for="(item, index) in invoiceForm.invoiceAttachmentInfo"
            >
              附件-{{ index + 1 }}
            </div>
          </div>
        </div>
        <div v-show="aciton == 0" style="display: flex">
          <div style="width: 50%; background-color: rgb(240, 242, 245)">
            <div style="display: flex; align-items: center; width: 99%">
              <svg-icon
                class-name="icon"
                icon-class="pdf02"
                style="transform: scale(1.5); z-index: 999; margin: 20px"
              />
              <el-tooltip
                class="item"
                effect="dark"
                :content="getFileByContractAppendicesList(url)"
                placement="top-start"
              >
                <p
                  style="
                    white-space: nowrap;
                    max-width: 200px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  "
                >
                  {{ getFileByContractAppendicesList(url) }}
                </p>
              </el-tooltip>
              <svg-icon
                class-name="icon"
                icon-class="download02"
                style="
                  transform: scale(1.2);
                  z-index: 999;
                  margin-right: 10px;
                  margin-left: auto;
                  cursor: pointer;
                "
                @click="download()"
              />
              <p
                style="
                  font-size: 15px;
                  cursor: pointer;
                  color: rgb(25, 149, 247);
                  margin-right: 10px;
                "
                v-if="invoiceView !== true"
              >
                识别当前页
              </p>
              <el-upload
                :action="fileUrl"
                :on-success="uploadFile"
                :before-upload="handleBeforeUpload"
                :show-file-list="false"
                :headers="headers"
                v-if="invoiceView !== true"
              >
                <el-button
                  type="text"
                  style="
                    color: rgb(24, 144, 255) !important;
                    background-color: transparent !important;
                  "
                  >更改</el-button
                >
              </el-upload>
            </div>
            <div
              class="imageView"
              @mouseenter="isHovered = true"
              @mouseleave="isHovered = false"
            >
              <svg-icon
                v-if="isHovered"
                class-name="icon"
                icon-class="right"
                @click="nextPage"
                class="directionRight"
              />
              <svg-icon
                v-if="isHovered"
                class-name="icon"
                icon-class="left"
                @click="prePage"
                class="directionLeft"
              />
              <div class="pdf-container">
                <pdf
                  :page="PdfpageNum"
                  :src="url"
                  @progress="loadedRatio = $event"
                  @num-pages="pageTotalNum = $event"
                  style="width: 80vw; margin-left: 10px"
                ></pdf>
              </div>
            </div>
            <div style="margin: 10px; color: rgb(110, 114, 115)">
              当前页数：{{ PdfpageNum }} / {{ pageTotalNum }}
            </div>
          </div>
          <div style="width: 25%; margin: 10px; height: 680px; overflow: auto">
            <div
              style="
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                margin-left: 20px;
              "
            >
              <div class="blueBox"></div>
              <div style="font-size: large">发票信息</div>
            </div>
            <div>
              <el-form
                ref="invoiceFormRef"
                :model="invoiceForm"
                :inline="true"
                label-width="80px"
                label-position="top"
                style="margin-left: 20px"
              >
                <el-form-item label="发票所属合同编码" prop="contractCode">
                  <el-input
                    v-model="invoiceForm.contractCode"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    clearable
                    :disabled="invoiceView"
                  ></el-input>
                </el-form-item>
                <div
                  v-if="
                    invoiceForm.invoiceId && invoiceForm.contractStatus == '1'
                  "
                  style="
                    color: rgb(52, 161, 248);
                    cursor: pointer;
                    margin-top: -10px;
                    margin-bottom: 10px;
                  "
                >
                  该合同已失效
                </div>
                <div
                  v-if="
                    invoiceForm.invoiceId && invoiceForm.contractStatus == '0'
                  "
                  style="
                    color: rgb(52, 161, 248);
                    cursor: pointer;
                    margin-top: -10px;
                    margin-bottom: 10px;
                  "
                  @click="getContractForImage()"
                >
                  查看所属合同
                </div>
                <el-form-item
                  label="发票所属公司"
                  prop="belongingCompanyId"
                  :rules="[
                    {
                      required: true,
                      message: '请输入发票所属公司',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-select
                    v-model="invoiceForm.belongingCompanyId"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    clearable
                    :disabled="invoiceView"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in companyList"
                      :key="item.belongingCompanyId"
                      :label="item.name"
                      :value="item.belongingCompanyId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="发票类型"
                  prop="type"
                  :rules="[
                    {
                      required: true,
                      message: '请输入发票类型',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-select
                    v-model="invoiceForm.type"
                    clearable
                    :disabled="invoiceView"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in typeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="发票金额(元)"
                  prop="money"
                  :rules="[
                    {
                      required: true,
                      message: '请输入发票金额',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-input
                    v-model="invoiceForm.money"
                    @input="handleInput"
                    clearable
                    :style="{ width: 'calc(25vw - 50%)' }"
                    :disabled="invoiceView"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="销方公司"
                  prop="saleCompanyInfoList[0].name"
                  v-if="invoiceForm.saleCompanyInfoList[0]"
                  :rules="[
                    {
                      required: true,
                      message: '请输入销方公司',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-select
                    v-model="invoiceForm.saleCompanyInfoList[0].name"
                    clearable
                    filterable
                    allow-create
                    :style="{ width: 'calc(25vw - 50%)' }"
                    placeholder="请选择"
                    :disabled="invoiceView"
                    @change="changeSaleCompanyInfoList"
                  >
                    <el-option
                      v-for="item in saleCompanyList"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="销方税号"
                  v-if="invoiceForm.saleCompanyInfoList[0]"
                >
                  <el-select
                    v-model="invoiceForm.saleCompanyInfoList[0].taxNumber"
                    clearable
                    placeholder="请选择"
                    :disabled="invoiceView"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    filterable
                    allow-create
                  >
                    <el-option
                      v-for="item in saleCompanyList"
                      :key="item.taxNumber"
                      :label="item.taxNumber"
                      :value="item.taxNumber"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="销方银行账户"
                  v-if="invoiceForm.saleCompanyInfoList[0]"
                >
                  <el-select
                    v-model="invoiceForm.saleCompanyInfoList[0].bankAccount"
                    clearable
                    :disabled="invoiceView"
                    placeholder="请选择"
                    filterable
                    :style="{ width: 'calc(25vw - 50%)' }"
                    allow-create
                  >
                    <el-option
                      v-for="item in saleCompanyList"
                      :key="item.bankAccount"
                      :label="item.bankAccount"
                      :value="item.bankAccount"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="销方开户银行"
                  v-if="invoiceForm.saleCompanyInfoList[0]"
                >
                  <el-select
                    v-model="invoiceForm.saleCompanyInfoList[0].bank"
                    clearable
                    :disabled="invoiceView"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    placeholder="请选择"
                    filterable
                    allow-create
                  >
                    <el-option
                      v-for="item in saleCompanyList"
                      :key="item.bank"
                      :label="item.bank"
                      :value="item.bank"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="购方公司"
                  prop="purchaseCompanyInfoList[0].name"
                  v-if="invoiceForm.purchaseCompanyInfoList[0]"
                  :rules="[
                    {
                      required: true,
                      message: '请输入购方公司',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-select
                    v-model="invoiceForm.purchaseCompanyInfoList[0].name"
                    clearable
                    :disabled="invoiceView"
                    filterable
                    allow-create
                    :style="{ width: 'calc(25vw - 50%)' }"
                    placeholder="请选择"
                    @change="changePurchaseCompanyInfoList"
                  >
                    <el-option
                      v-for="item in purchaseCompanyInfoList"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="购方税号"
                  v-if="invoiceForm.purchaseCompanyInfoList[0]"
                >
                  <el-select
                    v-model="invoiceForm.purchaseCompanyInfoList[0].taxNumber"
                    clearable
                    placeholder="请选择"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    :disabled="invoiceView"
                    filterable
                    allow-create
                  >
                    <el-option
                      v-for="item in purchaseCompanyInfoList"
                      :key="item.taxNumber"
                      :label="item.taxNumber"
                      :value="item.taxNumber"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="购方银行账户"
                  v-if="invoiceForm.purchaseCompanyInfoList[0]"
                >
                  <el-select
                    v-model="invoiceForm.purchaseCompanyInfoList[0].bankAccount"
                    clearable
                    placeholder="请选择"
                    :disabled="invoiceView"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    filterable
                    allow-create
                  >
                    <el-option
                      v-for="item in purchaseCompanyInfoList"
                      :key="item.bankAccount"
                      :label="item.bankAccount"
                      :value="item.bankAccount"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="购方开户银行"
                  v-if="invoiceForm.purchaseCompanyInfoList[0]"
                >
                  <el-select
                    v-model="invoiceForm.purchaseCompanyInfoList[0].bank"
                    clearable
                    placeholder="请选择"
                    filterable
                    :disabled="invoiceView"
                    allow-create
                    :style="{ width: 'calc(25vw - 50%)' }"
                  >
                    <el-option
                      v-for="item in purchaseCompanyInfoList"
                      :key="item.bank"
                      :label="item.bank"
                      :value="item.bank"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="开票日期">
                  <el-date-picker
                    v-model="invoiceForm.invoiceTime"
                    type="date"
                    placeholder="选择日期"
                    :editable="false"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    :disabled="invoiceView"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="开票内容">
                  <el-input
                    v-model="invoiceForm.content"
                    clearable
                    :style="{ width: 'calc(25vw - 50%)' }"
                    :disabled="invoiceView"
                  ></el-input>
                </el-form-item>
                <el-form-item label="财务入账类别">
                  <el-input
                    v-model="invoiceForm.accountType"
                    clearable
                    :style="{ width: 'calc(25vw - 50%)' }"
                    :disabled="invoiceView"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div
                style="
                  display: flex;
                  align-items: center;
                  margin-bottom: 10px;
                  margin-left: 20px;
                "
                v-if="invoiceView !== true"
              >
                <div class="blueBox"></div>
                <div style="font-size: large">附件信息</div>
              </div>
              <el-upload
                :action="fileUrl"
                :on-success="uploadData"
                :on-remove="handleRemove"
                :file-list="invoiceForm.invoiceAttachmentInfo"
                :before-upload="handleBeforeUpload"
                :headers="headers"
                v-if="invoiceView !== true"
              >
                <el-button
                  icon="el-icon-plus"
                  style="margin-left: 20px"
                  :style="{ width: 'calc(23vw - 100%)' }"
                />
              </el-upload>
              <div
                style="
                  display: flex;
                  align-items: center;
                  margin-top: 20px;
                  margin-left: 20px;
                "
              >
                <div class="blueBox"></div>
                <div style="font-size: large">其他信息</div>
              </div>
              <p style="margin-left: 20px; margin-bottom: 0px; margin-top: 5px">
                备注(200字内)
              </p>
              <el-input
                type="textarea"
                :disabled="invoiceView"
                :autosize="{ minRows: 6, maxRows: 8 }"
                placeholder="请输入内容"
                v-model="invoiceForm.remark"
                maxlength="200"
                show-word-limit
                style="margin-left: 20px"
                :style="{ width: 'calc(30vw - 55%)' }"
                :class="{
                  'input-limit-reached':
                    invoiceForm.remark && invoiceForm.remark.length >= 200,
                }"
              />
            </div>
          </div>
        </div>
        <div
          v-for="(item, index) in invoiceForm.invoiceAttachmentInfo"
          v-show="aciton == index + 1"
          style="display: flex"
        >
          <div style="width: 50%; background-color: rgb(240, 242, 245)">
            <div style="display: flex; align-items: center; width: 99%">
              <svg-icon
                class-name="icon"
                icon-class="pdf02"
                style="transform: scale(1.5); z-index: 999; margin: 20px"
              />
              <el-tooltip
                class="item"
                effect="dark"
                :content="nameList[index]"
                placement="top-start"
              >
                <p
                  style="
                    white-space: nowrap;
                    max-width: 200px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  "
                >
                  {{ nameList[index] }}
                </p>
              </el-tooltip>
              <svg-icon
                class-name="icon"
                icon-class="download02"
                style="
                  transform: scale(1.2);
                  z-index: 999;
                  margin: 10px;
                  margin-left: auto;
                  cursor: pointer;
                "
                @click="downloadAppendix(urlList[index])"
              />
              <p
                style="
                  font-size: 15px;
                  cursor: pointer;
                  color: rgb(25, 149, 247);
                  margin-right: 10px;
                "
                v-if="invoiceView !== true"
              >
                识别当前页
              </p>
              <el-upload
                :action="fileUrl"
                :on-success="
                  (response, file, fileList) =>
                    uploadFileByPdfAddress(response, file, fileList, index)
                "
                :before-upload="handleBeforeUpload"
                :show-file-list="false"
                v-if="invoiceView !== true"
                :headers="headers"
              >
                <el-button
                  type="text"
                  style="
                    color: rgb(24, 144, 255) !important;
                    background-color: transparent !important;
                  "
                  >更改</el-button
                >
              </el-upload>
            </div>
            <div
              class="imageView"
              @mouseenter="isHovered = true"
              @mouseleave="isHovered = false"
            >
              <svg-icon
                v-if="isHovered"
                class-name="icon"
                icon-class="right"
                @click="nextPageInList(index)"
                class="directionRight"
              />
              <svg-icon
                v-if="isHovered"
                class-name="icon"
                icon-class="left"
                @click="prePageInList(index)"
                class="directionLeft"
              />
              <div class="pdf-container">
                <pdf
                  v-if="pdfView"
                  :page="pdfStatusPage[index]"
                  :src="urlList[index]"
                  @progress="loadedRatioList[index] = $event"
                  @num-pages="getpageTotalNum($event, index)"
                  style="width: 80vw; margin-left: 10px"
                ></pdf>
              </div>
            </div>
            <div style="margin: 10px; color: rgb(110, 114, 115)">
              当前页数：{{ pdfStatusPage[index] }} / {{ pdfStatus[index] }}
            </div>
          </div>
          <div style="width: 25%; margin: 10px; height: 680px; overflow: auto">
            <div
              style="
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                margin-left: 20px;
              "
            >
              <div class="blueBox"></div>
              <div style="font-size: large">附件信息</div>
            </div>
            <div>
              <el-form
                ref="invoiceFormListRef"
                :model="invoiceForm.invoiceAttachmentInfo[index]"
                v-if="invoiceForm.invoiceAttachmentInfo"
                :inline="true"
                label-width="80px"
                label-position="top"
                style="margin-left: 20px"
              >
                <el-form-item
                  label="发票所属公司"
                  v-if="invoiceForm.invoiceAttachmentInfo"
                >
                  <el-select
                    v-model="
                      invoiceForm.invoiceAttachmentInfo[index]
                        .belongingCompanyId
                    "
                    :disabled="invoiceView"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in companyList"
                      :key="item.belongingCompanyId"
                      :label="item.name"
                      :value="item.belongingCompanyId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="开票日期"
                  v-if="invoiceForm.invoiceAttachmentInfo"
                >
                  <el-date-picker
                    v-model="
                      invoiceForm.invoiceAttachmentInfo[index].invoiceTime
                    "
                    type="date"
                    placeholder="选择日期"
                    :editable="false"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    :disabled="invoiceView"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item
                  label="发票内容"
                  prop="content"
                  v-if="invoiceForm.invoiceAttachmentInfo"
                >
                  <el-input
                    v-model="invoiceForm.invoiceAttachmentInfo[index].content"
                    clearable
                    :disabled="invoiceView"
                    :style="{ width: 'calc(25vw - 50%)' }"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="发票金额(元)"
                  prop="money"
                  v-if="invoiceForm.invoiceAttachmentInfo"
                >
                  <el-input
                    v-model="invoiceForm.invoiceAttachmentInfo[index].money"
                    clearable
                    @input="handleInputByIndex($event, index)"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    :disabled="invoiceView"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="发票类型"
                  prop="type"
                  v-if="invoiceForm.invoiceAttachmentInfo"
                >
                  <el-select
                    v-model="invoiceForm.invoiceAttachmentInfo[index].type"
                    clearable
                    placeholder="请选择"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    :disabled="invoiceView"
                  >
                    <el-option
                      v-for="item in typeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="销方公司"
                  v-if="invoiceForm.invoiceAttachmentInfo"
                  :rules="[
                    {
                      required: true,
                      message: '请输入销方公司',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-select
                    v-model="
                      invoiceForm.invoiceAttachmentInfo[index]
                        .saleCompanyInfoList[0].name
                    "
                    :disabled="invoiceView"
                    allow-create
                    filterable
                    clearable
                    :style="{ width: 'calc(25vw - 50%)' }"
                    placeholder="请选择"
                    @change="changeSaleCompanyInfoListByIndex(item, index)"
                  >
                    <el-option
                      v-for="item in saleCompanyList"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="销方税号"
                  v-if="invoiceForm.invoiceAttachmentInfo"
                >
                  <el-select
                    v-model="
                      invoiceForm.invoiceAttachmentInfo[index]
                        .saleCompanyInfoList[0].taxNumber
                    "
                    clearable
                    :style="{ width: 'calc(25vw - 50%)' }"
                    placeholder="请选择"
                    :disabled="invoiceView"
                  >
                    <el-option
                      v-for="item in saleCompanyList"
                      :key="item.taxNumber"
                      :label="item.taxNumber"
                      :value="item.taxNumber"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="销方银行账户"
                  v-if="invoiceForm.invoiceAttachmentInfo"
                >
                  <el-select
                    v-model="
                      invoiceForm.invoiceAttachmentInfo[index]
                        .saleCompanyInfoList[0].bankAccount
                    "
                    clearable
                    placeholder="请选择"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    :disabled="invoiceView"
                  >
                    <el-option
                      v-for="item in saleCompanyList"
                      :key="item.bankAccount"
                      :label="item.bankAccount"
                      :value="item.bankAccount"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="销方开户银行"
                  v-if="invoiceForm.invoiceAttachmentInfo"
                >
                  <el-select
                    v-model="
                      invoiceForm.invoiceAttachmentInfo[index]
                        .saleCompanyInfoList[0].bank
                    "
                    :disabled="invoiceView"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in saleCompanyList"
                      :key="item.bank"
                      :label="item.bank"
                      :value="item.bank"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="购方公司"
                  v-if="invoiceForm.invoiceAttachmentInfo"
                  :rules="[
                    {
                      required: true,
                      message: '请输入购方公司',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-select
                    v-model="
                      invoiceForm.invoiceAttachmentInfo[index]
                        .purchaseCompanyInfoList[0].name
                    "
                    clearable
                    allow-create
                    filterable
                    :style="{ width: 'calc(25vw - 50%)' }"
                    placeholder="请选择"
                    :disabled="invoiceView"
                    @change="changePurchaseCompanyInfoListByIndex(item, index)"
                  >
                    <el-option
                      v-for="item in purchaseCompanyInfoList"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="购方税号"
                  v-if="invoiceForm.invoiceAttachmentInfo"
                >
                  <el-select
                    v-model="
                      invoiceForm.invoiceAttachmentInfo[index]
                        .purchaseCompanyInfoList[0].taxNumber
                    "
                    clearable
                    :disabled="invoiceView"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in purchaseCompanyInfoList"
                      :key="item.taxNumber"
                      :label="item.taxNumber"
                      :value="item.taxNumber"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="购方银行账户"
                  v-if="invoiceForm.invoiceAttachmentInfo"
                >
                  <el-select
                    v-model="
                      invoiceForm.invoiceAttachmentInfo[index]
                        .purchaseCompanyInfoList[0].bankAccount
                    "
                    clearable
                    :disabled="invoiceView"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in purchaseCompanyInfoList"
                      :key="item.bankAccount"
                      :label="item.bankAccount"
                      :value="item.bankAccount"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="购方开户银行"
                  v-if="invoiceForm.invoiceAttachmentInfo"
                >
                  <el-select
                    v-model="
                      invoiceForm.invoiceAttachmentInfo[index]
                        .purchaseCompanyInfoList[0].bank
                    "
                    :disabled="invoiceView"
                    clearable
                    :style="{ width: 'calc(25vw - 50%)' }"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in purchaseCompanyInfoList"
                      :key="item.bank"
                      :label="item.bank"
                      :value="item.bank"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="财务入账类别"
                  v-if="invoiceForm.invoiceAttachmentInfo"
                >
                  <el-input
                    v-model="
                      invoiceForm.invoiceAttachmentInfo[index]
                        .purchaseCompanyInfoList[0].accountType
                    "
                    :disabled="invoiceView"
                    clearable
                    :style="{ width: 'calc(25vw - 50%)' }"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div
                style="
                  display: flex;
                  align-items: center;
                  margin-bottom: 10px;
                  margin-left: 20px;
                "
              >
                <div class="blueBox"></div>
                <div style="font-size: large">其他信息</div>
              </div>
              <p style="margin-left: 20px">备注(200字内)</p>
              <el-input
                type="textarea"
                :autosize="{ minRows: 6, maxRows: 8 }"
                placeholder="请输入内容"
                v-if="invoiceForm.invoiceAttachmentInfo"
                v-model="
                  invoiceForm.invoiceAttachmentInfo[index]
                    .purchaseCompanyInfoList[0].remark
                "
                :disabled="invoiceView"
                maxlength="200"
                show-word-limit
                :class="{
                  'input-limit-reached':
                    invoiceForm.invoiceAttachmentInfo[index]
                      .purchaseCompanyInfoList[0].remark &&
                    invoiceForm.invoiceAttachmentInfo[index]
                      .purchaseCompanyInfoList[0].remark.length >= 200,
                }"
                style="margin-left: 20px"
                :style="{ width: 'calc(30vw - 55%)' }"
              />
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="submitBillForm"
          v-if="invoiceView !== true"
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listInvoice,
  getInvoice,
  delInvoice,
  addInvoice,
  updateInvoice,
} from "@/api/contract/Invoice";
import { listBelongingCompany } from "@/api/contract/BelongingCompany";
import { listInvoiceInformation } from "@/api/contract/InvoiceInformation";
import { getToken } from "@/utils/auth";
import { downLoadExcle02, downLoadExcle } from "@/utils/zipDownload.js";
import pdf from "vue-pdf";
import Vue from "vue";
export default {
  name: "Invoice",
  components: {
    pdf,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 发票表格数据
      InvoiceList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      invoiceView: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        contractId: null,
        belongingCompanyId: null,
        code: null,
        type: null,
        money: null,
        salesInvoiceId: null,
        buyInvoiceId: null,
        invoiceTime: null,
        accountType: null,
        addUserId: null,
        addTime: null,
        updateUserId: null,
        content: null,
        pdfAddress: null,
        value: null,
      },
      //页码选择
      aciton: 0,
      //pdf展示组件的翻页按钮显示
      isHovered: false,
      //pdf的加载进度
      loadedRatio: 0,
      loadedRatioList: [],
      //总数
      pageTotalNum: 0,
      //当前页
      PdfpageNum: 1,
      activeName: 0,
      //url初始值
      url: "",
      //url显示的list
      urlList: [],
      nameList: [],
      pdfStatus: [],
      pdfStatusPage: [],
      //状态列表
      typeList: [
        {
          label: "销项发票",
          value: "0",
        },
        {
          label: "进项发票",
          value: "1",
        },
      ],
      fileList: [],
      typeList: [
        {
          label: "销项发票",
          value: "0",
        },
        {
          label: "进项发票",
          value: "1",
        },
      ],
      buttonList: [
        {
          icon: "el-icon-delete",
          text: "批量删除",
          methods: this.handleDelete,
        },
        {
          icon: "el-icon-upload2",
          text: "导出台账",
          methods: this.getDownLoadExcle,
        },
        {
          icon: "el-icon-download",
          text: "批量下载",
          methods: this.getDownloadZip,
        },
      ],
      //发票form
      invoiceForm: {
        saleCompanyInfoList: [
          // {
          //   invoiceInformationId: 0,
          //   name: "",
          //   taxNumber: "",
          //   bank: "",
          //   bankAccount: "",
          // },
        ],
        purchaseCompanyInfoList: [
          // {
          //   invoiceInformationId: 0,
          //   name: "",
          //   taxNumber: "",
          //   bank: "",
          //   bankAccount: "",
          // },
        ],
      },
      pdfView: true,
      fileUrl: process.env.VUE_APP_BASE_API + "/common/upload",
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      //表格属性
      tableItem: [
        {
          porp: "发票所属公司",
          data: "belongingCompanyName",
          fixed: "left",
          width: 160,
          solt: {
            name: 2,
          },
          methods: this.handleView,
        },
        {
          porp: "发票编码",
          data: "code",
          width: 160,
        },
        {
          porp: "发票类型",
          data: "type",
          width: 160,
          solt: {
            name: 6,
          },
        },
        {
          porp: "发票金额(元)",
          data: "money",
          width: 160,
        },
        {
          porp: "销方公司",
          data: "saleCompanyInfoList[0].name",
          width: 160,
          solt: {
            name: 1,
          },
        },
        {
          porp: "销方税号",
          data: "saleCompanyInfoList[0].taxNumber",
          width: 160,
          solt: {
            name: 1,
          },
        },
        {
          porp: "销方银行账号",
          data: "saleCompanyInfoList[0].bankAccount",
          width: 160,
          solt: {
            name: 1,
          },
        },
        {
          porp: "销方开户银行",
          data: "saleCompanyInfoList[0].bank",
          width: 160,
          solt: {
            name: 1,
          },
        },
        {
          porp: "购方公司",
          data: "purchaseCompanyInfoList[0].name",
          width: 160,
          solt: {
            name: 1,
          },
        },
        {
          porp: "购方税号",
          data: "purchaseCompanyInfoList[0].taxNumber",
          width: 160,
          solt: {
            name: 1,
          },
        },
        {
          porp: "开票日期",
          data: "invoiceTime",
          width: 160,
        },
        {
          porp: "财务入账类别",
          data: "accountType",
          width: 160,
          solt: {
            name: 1,
          },
        },
        {
          porp: "上传者",
          data: "addUser",
          width: 160,
        },
        {
          porp: "上传时间",
          data: "addTime",
          width: 160,
        },
        {
          porp: "修改者",
          data: "updateUser",
          width: 160,
        },
        {
          porp: "修改时间",
          data: "updateTime",
          width: 160,
        },
        {
          porp: "发票内容",
          data: "content",
          width: 160,
        },
        {
          porp: "备注",
          data: "remark",
          width: 160,
        },
        {
          porp: "操作",
          fixed: "right",
          width: 120,
          solt: {
            name: 5,
            operate: [
              {
                text: "修改",
                icon: "editTable",
                methods: this.handleUpdate,
              },
              {
                text: "删除",
                icon: "del",
                methods: this.handleDelete,
              },
            ],
          },
        },
      ],
      // 表单参数
      form: {},
      invoiceView: false,
      saleCompanyList: [],
      purchaseCompanyInfoList: [],
      AppendicesFormList: [],
      AppendicesForm: {},
      companyList: [],
      // 表单校验
      rules: {
        contractId: [
          {
            required: true,
            message: "发票所属合同id不能为空",
            trigger: "blur",
          },
        ],
        belongingCompanyId: [
          {
            required: true,
            message: "发票所属公司id不能为空",
            trigger: "blur",
          },
        ],
        code: [
          { required: true, message: "发票编码不能为空", trigger: "blur" },
        ],
        type: [
          { required: true, message: "发票类型不能为空", trigger: "blur" },
        ],
        money: [
          { required: true, message: "发票金额不能为空", trigger: "blur" },
        ],
        salesInvoiceId: [
          { required: true, message: "销方公司id不能为空", trigger: "blur" },
        ],
        buyInvoiceId: [
          { required: true, message: "购方公司id不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
    this.getlistbelongingCompanyNamebyBelongingCompanyId();
    this.getlistInvoiceAttachment();
  },
  methods: {
    //金额限制
    handleInput(value) {
      const regex = /^\d{0,6}(\.\d{0,2})?$/;
      // 如果输入不符合正则表达式，则将值重置为上一次的合法值
      if (!regex.test(value)) {
        this.invoiceForm.money = this.invoiceForm.money.substring(
          0,
          value.length - 1
        );
      }
    },
    //附件金额限制
    handleInputByIndex(value, index) {
      value;
      index;
      const regex = /^\d{0,6}(\.\d{0,2})?$/;
      // 如果输入不符合正则表达式，则将值重置为上一次的合法值
      if (!regex.test(value)) {
        this.invoiceForm.invoiceAttachmentInfo[index].money =
          this.invoiceForm.invoiceAttachmentInfo[index].money.substring(
            0,
            value.length - 1
          );
      }
    },
    //导出发票台账
    getDownLoadExcle() {
      let invoiceIds = this.ids.join(",");
      downLoadExcle02("/contract/Invoice/export", {
        invoiceIds: invoiceIds,
      })
        .then((res) => {
          return res.data;
        })
        .then((file) => {
          const fileUrl = URL.createObjectURL(file);
          const a = document.createElement("a");
          a.href = fileUrl;
          a.download = "发票台账信息.xlsx";
          document.body.appendChild(a); // 将链接添加到文档中
          a.click(); // 触发下载
          document.body.removeChild(a); // 下载完成后移除链接
          URL.revokeObjectURL(url);
        });
    },
    //下载发票图片
    getDownloadZip() {
      downLoadExcle("/contract/Invoice/download", this.ids)
        .then((res) => {
          return res.data;
        })
        .then((file) => {
          const fileUrl = URL.createObjectURL(file);
          const a = document.createElement("a");
          a.href = fileUrl;
          a.download = "发票.zip";
          document.body.appendChild(a); // 将链接添加到文档中
          a.click(); // 触发下载
          document.body.removeChild(a); // 下载完成后移除链接
          URL.revokeObjectURL(url);
        });
    },
    //文件导入按钮事件
    uploadFileHandleAdd(file) {
      this.reset();
      console.log("展示附件上传回调", file);
      this.url = process.env.VUE_APP_BASE_API + file.fileName;
      const file02 = file.url.split("/");
      this.document = file02[file02.length - 1];
      this.invoiceForm.pdfAddress = file.fileName;
      this.handleAdd();
    },
    //解析pdf路径获得文件名称
    getFileByContractAppendicesList(pdfAddress) {
      console.log("pdfAddress", pdfAddress);
      const url = process.env.VUE_APP_BASE_API + pdfAddress;
      console.log(url);
      if (pdfAddress !== "") {
        const file02 = url.split("/");
        console.log("file02", file02);
        return file02[file02.length - 1];
      }
      return "空";
    },
    //pdf下载按钮
    download() {
      console.log(this.url);
      window.open(this.url, "_blank");
    },
    //pdf附件展示上传回调
    uploadFile(file) {
      console.log("展示附件上传回调", file);
      this.url = process.env.VUE_APP_BASE_API + file.fileName;
      const file02 = file.url.split("/");
      this.invoiceForm.pdfAddress = file.fileName;
    },
    //上一页
    prePage() {
      if (this.PdfpageNum > 1) {
        this.PdfpageNum--;
      } else {
        this.$message({
          message: "已到达第一页",
          type: "warning",
        });
      }
    },
    //下一页
    nextPage() {
      if (this.PdfpageNum < this.pageTotalNum) {
        this.PdfpageNum++;
      } else {
        this.$message({
          message: "已到达最后一页",
          type: "warning",
        });
      }
    },
    //附件中上一页
    prePageInList(index) {
      if (this.pdfStatusPage[index] > 1) {
        this.pdfStatusPage[index]--;
      } else {
        this.$message({
          message: "已到达第一页",
          type: "warning",
        });
      }
    },
    //附件中下一页
    nextPageInList(index) {
      if (this.pdfStatusPage[index] < this.pdfStatus[index]) {
        this.pdfStatusPage[index]++;
      } else {
        this.$message({
          message: "已到达最后一页",
          type: "warning",
        });
      }
    },
    //附件pdf上传成功回调
    uploadFileByPdfAddress(res, file, fileList, index) {
      this.pdfView = false;
      console.log("返回", res);
      console.log("文件", file);
      console.log("列表", fileList);
      console.log("位置", index);
      this.urlList[index] = process.env.VUE_APP_BASE_API + res.fileName;
      this.pdfStatusPage[index] = 1;
      console.log(this.urlList);
      this.nameList[index] = this.getFileByContractAppendicesList(
        this.urlList[index]
      );
      this.invoiceForm.invoiceAttachmentInfo[index].pdfAddress = res.fileName;
      this.$nextTick(() => {
        this.pdfView = true;
      });
    },
    //获取页码
    getpageTotalNum(value, index) {
      console.log("页面页码", value);
      console.log("位置", index);
      this.pdfStatus[index] = value;
    },
    /** 查询发票列表 */
    getList() {
      this.loading = true;
      listInvoice(this.queryParams).then((response) => {
        this.InvoiceList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //合同附件上传回调
    uploadData(file) {
      console.log(file);
      const fileValue = {
        pdfAddress: file.fileName,
        name: file.newFileName,
        purchaseCompanyInfoList: [
          {
            invoiceInformationId: 0,
            name: "",
            taxNumber: "",
            bank: "",
            bankAccount: "",
          },
        ],
        remark: "",
        saleCompanyInfoList: [
          {
            invoiceInformationId: 0,
            name: "",
            taxNumber: "",
            bank: "",
            bankAccount: "",
          },
        ],
      };
      const url = file.url;
      const name = this.getFileByContractAppendicesList(file.url);
      this.urlList.push(process.env.VUE_APP_BASE_API + file.fileName);
      this.nameList.push(name);
      this.pdfStatusPage.push(1);
      this.loadedRatioList.push(0);
      if (this.invoiceForm.invoiceAttachmentInfo == undefined) {
        Vue.set(this.invoiceForm, "invoiceAttachmentInfo", []); // 初始化为空数组
      }
      this.invoiceForm.invoiceAttachmentInfo.push(fileValue);
      console.log("文件列表", this.invoiceForm.invoiceAttachmentInfo);
      console.log("文件url列表", this.urlList);
    },

    //查看合同的图像
    getContractForImage() {
      const url =
        process.env.VUE_APP_BASE_API + this.invoiceForm.contractPdfAddress;
      window.open(url, "_blank");
    },
    //附件删除回调
    handleRemove(res, flieList) {
      this.pdfView = false;
      console.log("删除pdf", res);
      console.log("剩余fileList", flieList);
      this.invoiceForm.invoiceAttachmentInfo = flieList;
      this.nameList = [];
      this.loadedRatioList = [];
      this.urlList = [];
      this.invoiceForm.invoiceAttachmentInfo.forEach((item) => {
        this.nameList.push(item.name);
        this.urlList.push(process.env.VUE_APP_BASE_API + item.pdfAddress);
        this.pdfStatusPage.push(1);
        this.loadedRatioList.push(0);
      });
      console.log("urlList", this.urlList);
      this.$nextTick(() => {
        this.pdfView = true;
      });
    },
    //文件类型限制
    handleBeforeUpload(file) {
      const fileName = file.name.split(".");
      const fileExt = fileName[fileName.length - 1];
      const isTypeOk = fileExt == "pdf";
      if (!isTypeOk) {
        this.$modal.msgError(`文件格式不正确, 请上传pdf格式文件!`);
        return false;
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.aciton = 0;
      this.nameList = [];
      this.urlList = [];
      this.invoiceForm = {
        saleCompanyInfoList: [
          {
            invoiceInformationId: "",
            name: "",
            taxNumber: "",
            bank: "",
            bankAccount: "",
          },
        ],
        purchaseCompanyInfoList: [
          {
            invoiceInformationId: "",
            name: "",
            taxNumber: "",
            bank: "",
            bankAccount: "",
          },
        ],
      };
      this.resetForm("form");
    },
    //附件pdf下载按钮
    downloadAppendix(value) {
      console.log(value);
      window.open(value, "_blank");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.startDate = null;
      this.queryParams.terminationDate = null;
      console.log(this.queryParams.value);
      if (this.queryParams.value) {
        this.queryParams.startDate = this.queryParams.value[0];
        this.queryParams.terminationDate = this.queryParams.value[1];
      }
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        contractId: null,
        belongingCompanyId: null,
        code: null,
        type: null,
        money: null,
        salesInvoiceId: null,
        buyInvoiceId: null,
        invoiceTime: null,
        accountType: null,
        addUserId: null,
        addTime: null,
        updateUserId: null,
        content: null,
        pdfAddress: null,
        value: null,
      };
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.invoiceId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    //标签页点击
    TabChange(tab) {
      console.log("标签页被点击：", tab.index);
      let valueIndex = tab.index - 1;
      console.log("使用位置", valueIndex);
      if (tab.index >= 1) {
        this.AppendicesForm =
          this.invoiceForm.invoiceAttachmentInfo[valueIndex];
        console.log("form", this.AppendicesForm);
        console.log("list", this.invoiceForm.invoiceAttachmentInfo);
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.invoiceView = false;
      console.log("form结构", this.AppendicesForm);
      console.log("form02", this.invoiceForm);
      this.getlistbelongingCompanyNamebyBelongingCompanyId();
      this.getlistInvoiceAttachment();
      this.open = true;
    },
    ceshi() {
      console.log("123321");
    },
    //文件上传成功回调
    ceshi02(file) {
      console.log("上传完成回调", file);
      this.invoiceForm.invoiceAttachmentInfo.push(file);
    },
    //获取文件列表
    ceshi03(file) {
      console.log("文件列表回调", file);
    },
    //获取公司列表
    getlistbelongingCompanyNamebyBelongingCompanyId() {
      listBelongingCompany({ pageNum: 1, pageSize: 999 }).then((res) => {
        console.log(res);
        this.companyList = res.rows;
      });
    },
    //发票信息列表
    getlistInvoiceAttachment() {
      listInvoiceInformation({ pageNum: 1, pageSize: 999 }).then((res) => {
        console.log("发票信息列表", res);
        this.saleCompanyList = res.rows;
        this.purchaseCompanyInfoList = res.rows;
      });
    },
    //销方公司自动填写
    changeSaleCompanyInfoList(row) {
      console.log(this.invoiceForm);
      console.log("row", row);
      const foundCompany = this.saleCompanyList.find(
        (item) => item.name == row
      );
      if (foundCompany) {
        console.log("销方公司自动填写", foundCompany);
        this.invoiceForm.saleCompanyInfoList[0].bank = foundCompany.bank;
        this.invoiceForm.saleCompanyInfoList[0].bankAccount =
          foundCompany.bankAccount;
        this.invoiceForm.saleCompanyInfoList[0].taxNumber =
          foundCompany.taxNumber;
        console.log("销方公司自动填写02", this.invoiceForm);
      } else {
        this.invoiceForm.saleCompanyInfoList[0].bank = "";
        this.invoiceForm.saleCompanyInfoList[0].bankAccount = "";
        this.invoiceForm.saleCompanyInfoList[0].taxNumber = "";
      }
    },
    //附件中销方公司自动填写
    changeSaleCompanyInfoListByIndex(row, index) {
      console.log("销方公司自动填写", row);
      console.log("销方公司自动填写", index);
      const foundCompany = this.saleCompanyList.find(
        (item) =>
          item.name ==
          this.invoiceForm.invoiceAttachmentInfo[index].saleCompanyInfoList[0]
            .name
      );
      console.log(foundCompany);
      if (foundCompany) {
        console.log("销方公司自动填写", foundCompany);
        //
        this.invoiceForm.invoiceAttachmentInfo[
          index
        ].saleCompanyInfoList[0].bank = foundCompany.bank;
        //
        this.invoiceForm.invoiceAttachmentInfo[
          index
        ].saleCompanyInfoList[0].bankAccount = foundCompany.bankAccount;

        //
        this.invoiceForm.invoiceAttachmentInfo[
          index
        ].saleCompanyInfoList[0].taxNumber = foundCompany.taxNumber;
        console.log("销方公司自动填写02", this.invoiceForm);
      } else {
        this.invoiceForm.invoiceAttachmentInfo[
          index
        ].saleCompanyInfoList[0].bank = "";
        this.invoiceForm.invoiceAttachmentInfo[
          index
        ].saleCompanyInfoList[0].bankAccount = "";

        this.invoiceForm.invoiceAttachmentInfo[
          index
        ].saleCompanyInfoList[0].taxNumber = "";
      }
    },
    //购方公司自动填写
    changePurchaseCompanyInfoList(row) {
      console.log(this.invoiceForm);
      console.log("row", row);
      const foundCompany = this.purchaseCompanyInfoList.find(
        (item) => item.name == row
      );
      if (foundCompany) {
        console.log("购方公司自动填写", foundCompany);
        this.invoiceForm.purchaseCompanyInfoList[0].bank = foundCompany.bank;
        this.invoiceForm.purchaseCompanyInfoList[0].bankAccount =
          foundCompany.bankAccount;
        this.invoiceForm.purchaseCompanyInfoList[0].taxNumber =
          foundCompany.taxNumber;
        console.log("购方公司自动填写02", this.invoiceForm);
      } else {
        this.invoiceForm.purchaseCompanyInfoList[0].bank = "";
        this.invoiceForm.purchaseCompanyInfoList[0].bankAccount = "";
        this.invoiceForm.purchaseCompanyInfoList[0].taxNumber = "";
      }
    },
    changePurchaseCompanyInfoListByIndex(row, index) {
      console.log("购方公司自动填写", row);
      console.log("购方公司自动填写", index);
      const foundCompany = this.saleCompanyList.find(
        (item) =>
          item.name ==
          this.invoiceForm.invoiceAttachmentInfo[index]
            .purchaseCompanyInfoList[0].name
      );
      console.log(foundCompany);
      if (foundCompany) {
        console.log("销方公司自动填写", foundCompany);
        //
        this.invoiceForm.invoiceAttachmentInfo[
          index
        ].purchaseCompanyInfoList[0].bank = foundCompany.bank;
        //
        this.invoiceForm.invoiceAttachmentInfo[
          index
        ].purchaseCompanyInfoList[0].bankAccount = foundCompany.bankAccount;
        //
        //
        this.invoiceForm.invoiceAttachmentInfo[
          index
        ].purchaseCompanyInfoList[0].taxNumber = foundCompany.taxNumber;
        console.log("销方公司自动填写02", this.invoiceForm);
      } else {
        this.invoiceForm.invoiceAttachmentInfo[
          index
        ].purchaseCompanyInfoList[0].bank = "";
        this.invoiceForm.invoiceAttachmentInfo[
          index
        ].purchaseCompanyInfoList[0].bankAccount = "";
        this.invoiceForm.invoiceAttachmentInfo[
          index
        ].purchaseCompanyInfoList[0].taxNumber = "";
      }
    },
    //查看
    handleView(row) {
      this.invoiceView = true;
      this.reset();
      getInvoice(row.invoiceId).then((res) => {
        console.log("invoice", res);
        this.invoiceForm = res.data;
        //附件处理
        this.invoiceForm.invoiceAttachmentInfo.forEach((item, index) => {
          item.name = item.name;
          this.urlList[index] = process.env.VUE_APP_BASE_API + item.pdfAddress;
          this.pdfStatusPage[index] = 1;
          console.log(this.urlList);
          this.nameList[index] = this.getFileByContractAppendicesList(
            this.urlList[index]
          );
        });
        this.url = process.env.VUE_APP_BASE_API + this.invoiceForm.pdfAddress;
        //公司列表获取
        this.getlistbelongingCompanyNamebyBelongingCompanyId();
        //发票信息列表获取
        this.getlistInvoiceAttachment();
        this.open = true;
        this.title = "修改发票";
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.invoiceView = false;
      this.reset();
      getInvoice(row.invoiceId).then((res) => {
        console.log("invoice", res);
        this.invoiceForm = res.data;
        //附件处理
        this.invoiceForm.invoiceAttachmentInfo.forEach((item, index) => {
          item.name = item.name;
          this.urlList[index] = process.env.VUE_APP_BASE_API + item.pdfAddress;
          this.pdfStatusPage[index] = 1;
          console.log("修改按钮处理urlList01", this.urlList);
          this.nameList[index] = this.getFileByContractAppendicesList(
            this.urlList[index]
          );
        });
        console.log("修改按钮处理urlList", this.urlList);
        this.url = process.env.VUE_APP_BASE_API + this.invoiceForm.pdfAddress;
        //公司列表获取
        this.getlistbelongingCompanyNamebyBelongingCompanyId();
        //发票信息列表获取
        this.getlistInvoiceAttachment();
        this.open = true;
        this.title = "修改发票";
      });
    },

    //修改提交
    submitBillForm() {
      this.$refs["invoiceFormRef"].validate((valid) => {
        if (valid) {
          console.log("表单验证通过");
          this.handleInvoiceAttachment();
        } else {
          console.log("表单验证不通过");
          this.showWarningMessage("请填写必填信息");
          return false;
        }
      });
    },

    handleInvoiceAttachment() {
      if (this.invoiceForm.invoiceAttachmentInfo) {
        console.log("有附件逻辑");
        if (!this.hasEmptyAttachment()) {
          this.submitInvoiceForm();
        } else {
          this.showWarningMessage("请填写必填信息");
        }
      } else {
        console.log("无附件逻辑");
        this.submitInvoiceForm();
      }
    },

    hasEmptyAttachment() {
      let hasEmptyA = this.invoiceForm.invoiceAttachmentInfo.some(
        (item) =>
          item.saleCompanyInfoList[0].name == "" ||
          item.saleCompanyInfoList[0].name == undefined
      );
      let hasEmptyB = this.invoiceForm.invoiceAttachmentInfo.some(
        (item) =>
          item.purchaseCompanyInfoList[0].name == "" ||
          item.purchaseCompanyInfoList[0].name == undefined
      );
      return hasEmptyA || hasEmptyB;
    },

    submitInvoiceForm() {
      if (this.invoiceForm.invoiceId) {
        // 修改逻辑
        updateInvoice(this.invoiceForm).then((res) => {
          this.handleResponse(res, "修改成功");
        });
      } else {
        // 新增逻辑
        addInvoice(this.invoiceForm).then((res) => {
          this.handleResponse(res, "新增成功");
        });
      }
    },

    handleResponse(res, successMessage) {
      if (res.code == 200) {
        this.$modal.msgSuccess(successMessage);
        this.open = false;
        this.getList();
      }
    },

    showWarningMessage(message) {
      this.$message({
        message,
        type: "warning",
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.invoiceId != null) {
            updateInvoice(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addInvoice(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      let invoiceIds = null;
      if (row.invoiceId) {
        invoiceIds = row.invoiceId;
        this.$modal
          .confirm("此操作将永久删除，是否继续？")
          .then(function () {
            return delInvoice(invoiceIds);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      } else {
        if (this.ids.length == 0) {
          this.$message({
            message: "请选择条目",
            type: "warning",
          });
        } else {
          invoiceIds = this.ids.join(",");
          this.$modal
            .confirm("此操作将永久删除，是否继续？")
            .then(function () {
              return delInvoice(invoiceIds);
            })
            .then(() => {
              this.getList();
              this.$modal.msgSuccess("删除成功");
            })
            .catch(() => {});
        }
      }
    },
  },
};
</script>
<style scoped>
::v-deep .el-dialog {
  position: fixed;
  height: fit-content;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  margin: auto !important;
  border-radius: 5px !important;
}
::v-deep .el-dialog__header {
  background-color: rgb(248, 250, 251); /* 你可以根据需求修改颜色 */
  color: rgb(99, 86, 110); /* 标题文字颜色 */
  border-radius: 5px !important;
}
::v-deep .el-dialog__body {
  max-height: calc(100vh - 150px);
  min-height: calc(100vh - 150px);
  overflow: auto;
  border-top: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}
.tit_box {
  display: flex;
  justify-content: start;
  align-items: center;
  .act_tit {
    position: relative;
    font-weight: 700;
    font-size: 16px;
    color: rgb(24, 144, 255);
    margin-right: 30px;
    cursor: pointer;
  }
  .act_tit::before {
    content: "";
    position: absolute;
    width: 42px;
    height: 3px;
    left: calc(50% - 21px);
    bottom: -5px;
    background-color: #1896fc;
  }
  .tit {
    position: relative;
    font-size: 16px;
    color: #6f6f6f;
    margin-right: 30px;
    cursor: pointer;
  }
}
.pdf-container {
  width: 100%;
  height: 600px; /* 可以根据需要调整高度 */
  overflow-y: auto; /* 超出时显示滚动条 */
}
.imageView {
  width: 100%; /* 可以根据需要调整 */
  height: 600px;
  overflow-y: auto;
  position: relative;
}
::v-deep .el-input__inner {
  height: 40px;
}
::v-deep .el-form-item__label {
  line-height: 20px;
}
::v-deep .el-form-item {
  margin-bottom: 18px;
}
.directionLeft {
  transform: scale(2);
  position: absolute;
  top: 45%;
  z-index: 999;
  left: 10px;
  cursor: pointer;
}
.directionRight {
  transform: scale(2);
  position: absolute;
  top: 45%;
  z-index: 999;
  right: 10px;
  cursor: pointer;
}
.bill {
  margin-top: 10px;
  white-space: nowrap;
  padding: 10px 8px;
  text-align: center;
  background-color: #f4f4f4;
  color: #fff;
  border-radius: 5px;
  margin-right: 20px;
  color: #5297f7;
  position: relative;
  display: flex;
  align-items: center;
}
.Mask {
  display: none !important;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  background-color: rgb(33, 38, 41);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: 5px;
  opacity: 0.8;
}
.bill:hover .Mask {
  display: flex !important;
}
.blueBox {
  background-color: #39f;
  width: 4px;
  height: 20px;
  margin-right: 10px;
  border-radius: 3px;
}
.no-margin-form * {
  margin: 2px !important;
}
::v-deep .el-upload-list__item {
  border: 1px solid #ccc; /* 设置边框 */
  margin-left: 20px;
  width: calc(85%);
  border-radius: 4px; /* 可选：为边框添加圆角 */
}
/* 当达到最大长度时，计数器颜色变为红色 */
.input-limit-reached ::v-deep .el-input__count {
  color: red !important;
}
</style>
